<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Document Title -->
    <title>Product Evaluate</title>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css"
          href="assets/rs-plugin/css/settings.css" media="screen"/>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="assets/css2/ionicons.min.css">
    <link rel="stylesheet" href="assets/css2/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css2/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css2/main.css">
    <link rel="stylesheet" href="assets/css2/style.css">
    <link rel="stylesheet" href="assets/css2/responsive.css">

    <!-- Fonts Online -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
          rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900,100' rel='stylesheet' type='text/css'>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min2.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min2.css"/>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style3.css">
    <link rel="stylesheet" href="assets/evaluation/css/css.css">
    <link rel="stylesheet" href="assets/evaluation/css/unknow.css"/>

    <script src="assets/evaluation/js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    <!-- JavaScripts -->
    <script src="assets/js/vendors/modernizr.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
<!-- Page Wrapper -->
<div id="wrap" class="layout-1">
    <!-- Top bar -->
    <jsp:include page="header.jsp"></jsp:include>

    <!-- Content -->
    <div id="content">
        <!-- Products -->
        <section class="padding-top-40 padding-bottom-60">
            <div class="container">
                <div class="row">
                    <!-- Products -->
                    <div class="col-md-9">
                        <div class="product-detail">
                            <div class="product">
                                <!-- Slider Thumb -->
                                <div class="col-xs-5">
                                    <article class="slider-item on-nav">
                                        <div class="thumb-slider">
                                            <ul class="slides">
                                                <li data-thumb="images/item-img-1-3.jpg">
                                                    <c:choose>
                                                        <c:when test="${movie.picture eq null}">
                                                            <img src="assets/img_new/暂无海报.jpg" alt="">
                                                        </c:when>
                                                        <c:otherwise>
                                                            <img src="${pageContext.request.contextPath }/upload/${movie.picture}"
                                                                 alt="">
                                                        </c:otherwise>
                                                    </c:choose>
                                                </li>
                                            </ul>
                                        </div>
                                    </article>
                                </div>
                                <!-- Item Content -->
                                <div class="col-xs-7">
	                           <span class="tags">
                                   ${movie.type}
                               </span>
                                    <h5>${movie.name}</h5>

                                    <div class="row">
                                        <div class="col-sm-6"><span class="price">影片评分：
		                            <c:choose>
                                        <c:when test="${movie.score eq 0}">
                                            暂无评分
                                        </c:when>
                                        <c:otherwise>
                                            ${movie.score}
                                        </c:otherwise>
                                    </c:choose>
		                            </span></div>
                                        <br>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-11">
                                            <p>导演: <span class="in-stock">${movie.director}</span></p>
                                            <p>演员: <span class="in-stock">${movie.actor}</span></p>
                                            <p>制片国家/地区: <span class="in-stock">${movie.production_area}</span></p>
                                            <p>语言: <span class="in-stock">${movie.language}</span></p>
                                            <p>上映日期: <span class="in-stock"><fmt:formatDate
                                                    value="${movie.release_time}" type="date"
                                                    pattern="yyyy-MM-dd"/> </span></p>
                                            <p>片长: <span class="in-stock"> ${movie.length}</span></p>
                                            <p>影片简介：</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 text">
                                            <p>${movie.content}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- 评价部分 -->
                    <div class="col-md-9">
                        <form method="post" class="STYLE-NAME" name="commentForm" onsubmit="return check(this)">
                            <div class="evaluate">
                                <div class="top-evaluate">
                                    <h1>
                                        电影评价 <span>感谢您的贡献</span>
                                    </h1>
                                </div>
                                <div class="left-evaluate">
                                    <label>
                                        <span>请在此输入您的对该电影的评分: </span>
                                        <br/>
                                        <span>
												<div id="starRating">
												<p class="photo">
													<span><i class="high"></i><i class="nohigh"></i></span> 
													<span><i class="high"></i><i class="nohigh"></i></span>
													<span><i class="high"></i><i class="nohigh"></i></span> 
													<span><i class="high"></i><i class="nohigh"></i></span> 
													<span><i class="high"></i><i class="nohigh"></i></span>
												</p>
												</div>
											</span>
                                    </label>
                                </div>
                                <div class="right-evaluate">
                                    <label>
                                        <span>请在此输入您的文章标题:</span>
                                        <br/>
                                        <input id="reviewEssayTitle" name="title" size="60"></input>
                                    </label>
                                    <br>
                                    <label>
                                        <span>请在此输入您的文章内容:</span>
                                        <br/>
                                        <textarea id="reviewEssayContent" name="content" rows="8" cols="80"></textarea>
                                    </label>
                                </div>
                                <div class="bottom-evaluate">
                                    <label><input id="reviewEssayBtn" type="button" class="button" value="提交"/></label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- End Content -->
    <!-- Footer -->
    <jsp:include page="footer.jsp"></jsp:include>
    <!-- End Footer -->

    <!-- GO TO TOP  -->
    <a href="#" class="cd-top"><i class="fa fa-angle-up"></i></a>
    <!-- GO TO TOP End -->
</div>
<!-- End Page Wrapper -->

<script type="text/javascript">
    function check(commentForm) {
        if (commentForm.content.value == '') {
            alert("Comment can not be empty！");
            return false;
        } else
            return true;
    }
</script>
<script>
    $(function () {
        //评分
        var starRating = 0;
        $('.photo span').on('mouseenter', function () {
            var index = $(this).index() + 1;
            $(this).prevAll().find('.high').css('z-index', 1)
            $(this).find('.high').css('z-index', 1)
            $(this).nextAll().find('.high').css('z-index', 0)
            $('.starNum').html((index * 2).toFixed(1) + '分')
        })
        $('.photo').on(
            'mouseleave',
            function () {
                $(this).find('.high').css('z-index', 0)
                var count = starRating / 2
                if (count == 5) {
                    $('.photo span').find('.high').css('z-index', 1);
                } else {
                    $('.photo span').eq(count).prevAll().find('.high')
                        .css('z-index', 1);
                }
                $('.starNum').html(starRating.toFixed(1) + '分')
            })
        $('.photo span').on('click', function () {
            var index = $(this).index() + 1;
            $(this).prevAll().find('.high').css('z-index', 1)
            $(this).find('.high').css('z-index', 1)
            starRating = index * 2;
            $('.starNum').html(starRating.toFixed(1) + '分');
            alert('评分：' + (starRating.toFixed(1) / 2 + '分'))
        })
        //取消评分
        $('.cancleStar').on('click', function () {
            starRating = 0;
            $('.photo span').find('.high').css('z-index', 0);
            $('.starNum').html(starRating.toFixed(1) + '分');
        })
        //确定评分
        $('.sureStar').on('click', function () {
            if (starRating === 0) {
                alert('最低一颗星！');
            } else {
                alert('评分：' + (starRating.toFixed(1) / 2 + '分'))
            }
        })
        $('#reviewEssayBtn').click(function () {
            var score = (starRating.toFixed(1) / 2).toString();
            var title = $("#reviewEssayTitle").val().toString();
            var content = $("#reviewEssayContent").val().toString();
            //去掉文章中的特殊字符
            content = content.replace("<", "&lt;");
            content = content.replace(">", "&gt;");
            content = "<p>" + content;
            content = content.replace("&", "&amp;");
            content = content.replace("\n", " <br></p><p>");
            content = content.replace(" ", "&nbsp;");
            content = content + "</p>";

            $.ajax({
                type: "POST",
                url: getRootPath() + "/memberMovie?method=review",
                data: {
                    "score": score,
                    "title": encodeURIComponent(title),
                    "content": encodeURIComponent(content),
                    "movieName": encodeURIComponent("${movie.name}"),
                    "movId": "${movie.id}"
                },
                dataType: "text",
                success: function (data) {
                    location = getRootPath() + "/memberMovie?id=${movie.id}";
                }
            })
        })

        //获得URL的根路径
        function getRootPath() {
            var strFullPath = window.document.location.href;
            var strPath = window.document.location.pathname;
            var pos = strFullPath.indexOf(strPath);
            var prePath = strFullPath.substring(0, pos);
            var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
            return (prePath + postPath);
        }
    })
</script>
<script src="assets/js2/vendors/jquery/jquery.min.js"></script>
<script src="assets/js2/vendors/wow.min.js"></script>
<script src="assets/js2/vendors/bootstrap.min.js"></script>
<script src="assets/js2/vendors/own-menu.js"></script>
<script src="assets/js2/vendors/jquery.sticky.js"></script>
<script src="assets/js2/vendors/owl.carousel.min.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="text/javascript" src="assets/rs-plugin/js/jquery.tp.t.min.js"></script>
<script type="text/javascript" src="assets/rs-plugin/js/jquery.tp.min.js"></script>
<script src="assets/js2/main.js"></script>

<script src="assets/js/vendor/jquery-1.12.0.min.js"></script>
<!-- bootstrap js -->
<!-- owl.carousel js -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- meanmenu js -->
<script src="assets/js/jquery.meanmenu.js"></script>
<!-- countdown js -->
<script src="assets/js/countdown.js"></script>
<!-- jquery.nivo.slider.pack js -->
<script src="assets/js/jquery.nivo.slider.pack.js"></script>
<!-- jquery-ui.min.js -->
<script src="assets/js/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="assets/js/wow.min.js"></script>
<!-- plugins js -->
<script src="assets/js/plugins.js"></script>
<!-- main js -->
<script src="assets/js/main2.js"></script>
</body>
</html>